<template>
	<view class="" style="position: relative">
		<swiper style="height: 300rpx" :autoplay="true" :interval="5000" :duration="1000" circular @change="sss">
			<swiper-item v-for="(item, index) in datalist" :key="index">
				<image
					:src="item.image_url"
					style="height: 280rpx; width: 686rpx; margin-left: 34rpx; border-radius: 40rpx"
					@tap="sele(item, index)"
				></image>
				<!-- <view class="swiper-item">{{i}}</view> -->
			</swiper-item>
		</swiper>

		<view class="bar">
			<text style="font-size: 28rpx; color: white">{{ dangqian }}{{ '/' + total }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		lunbonews: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			dangqian: 1,
			total: 0,
			datalist: []
		};
	},
	watch: {
		lunbonews: {
			handler(newVal) {
				if (newVal) {
					this.datalist = newVal;
					this.total = newVal.length;
				}
			}
		}
	},
	methods: {
		sele(item, index) {
			uni.navigateTo({
				url:
					'/subpackages/subpackage1/pages/searchcollege/collegeDetails/news-details?data=' +
					encodeURIComponent(JSON.stringify(item))
			});
		},
		sss(item) {
			this.dangqian = item.detail.current + 1;
		}
	}
};
</script>
<style scoped>
.bar {
	/* text-align: right; */
	height: 40rpx;
	width: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-left: 320rpx;
	position: absolute;
	bottom: 40rpx;
	background-color: white;
	left: 290rpx;
	border-radius: 20rpx;
	background: rgba(0, 0, 0, 0.24);
}
</style>
